<template>
    <div class="box-container">
        <div class="header">
            <div class="left">
                <div class="icon">
                    <img src="../../../../assets/img/otto/box-icon.png" />
                </div>
                <span>{{ title }}</span>
            </div>
            <div class="right" v-show="show">
                <div class="icon"></div>
                <div class="detail" @click="linktoDetail">查看报警详情</div>
            </div>
        </div>
        <div class="body">  
            <slot></slot>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        title: {
            type: String,
            default: '默认标题',
        },
        show: {
            type: Boolean,
            default: false,
        }
    },
    methods: {
        linktoDetail() {
            // http://sinograin.otto.xin/login
            // window.location.href =  'http://sinograin.otto.xin/login'
            window.open('http://sinograin.otto.xin/login')
        },
    }
}
</script>


<style lang="scss" scoped>
.box-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .header {
        width: 100%;
        height: 53px;
        background: url('../../../../assets/img/otto/box-header.png') no-repeat 0px 0px;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        
        .left {
            display: flex;
            align-items: center;
            flex:1;
            .icon {
                margin-left:12px;
            }
            span {
                font-size: 26px;
                font-weight: bold;
                margin-left: 20px;
            }
        }

        .right {
            height: 100%;
            margin-right: 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            min-width: 120px;

            .icon {
                height: 40px;
                width: 40px;
                background: url('../../../../assets/img/otto/icon-desc.png') no-repeat 0px 0px;
                background-size: 100% 100%;
            }

            .detail {
                text-decoration: underline;
                cursor: pointer;
                color: #1FC6FF;
            }
        }

    }

    .body {
        height: calc(100% - 53px);
        width: 100%;
        background: url('../../../../assets/img/otto/box-border.png') no-repeat 0px 0px;
        background-size: 100% 100%;
        display: flex;
        align-items:center;
        justify-content:center;
    }
}
</style>

